<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){

            /**
             *
             *  让所有都选中
             getElementsByName（）是根据指定的name属性查询返回多个标签对象集合
             这个集合的操作跟数据一样
             集合中某个元素都是DOM对象
             这个集合中的㢝顺序是他们在HTML页面中从上到下的顺序
             *
             * check 表示复选框的选中状态，选中是true，补选中就是false
             * checked这个属性可读，可写
             * */
            alert(document.getElementById("btn01"));
            var hobbies=document.getElementsByName("hobby");
            //alert(hobbies[2].value)
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }
        //全不选
        function checkNo(){
            var hobbied=document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var hobbied=document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                if(hobbies[i].checked){
                    hobbies[i].checked=false;
                }else{
                    hobbies[i].checked=true;
                }

            }
        }

    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">javaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>